<template>
  <div class="page">
    <div class="mgb-xl">
      <div class="pdv bg-gray">
        <div class="bd-l-main pdl">单词跟读</div>
      </div>
      <div>
        <div v-for="(n, i) in cards" :key="n.id"
          class="weui-flex v-mdl ta-c bd-b pdv">
          <div class="pdh-l"><sound-player :path="n.audioPath"></sound-player></div>
          <div class="weui-flex__item">
            <div style="width: 100px;margin: 0 auto;">
              <pic :path="n.picPath"></pic>
            </div>
            <div>{{n.text}}</div>
          </div>
          <div class="pdh-l">
            <i class="if icon-close-solid c-gray fs-l" @tap="handleToggleSelect(n.id)"></i>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="pdv bg-gray">
        <div class="bd-l-main pdl">单词跟读</div>
      </div>
      <div>
        <div v-for="(n, i) in sentences" :key="n.id"
          class="weui-flex v-mdl ta-c bd-b pdv">
          <div class="pdh-l"><sound-player :path="n.audioPath"></sound-player></div>
          <div class="weui-flex__item">
            <div>{{n.text}}</div>
          </div>
          <div class="pdh-l">
            <i class="if icon-close-solid c-gray fs-l" @tap="handleToggleSelect(n.id)"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="fix-bottom bg-white">
      <div class="weui-flex v-mdl">
        <div class="weui-flex__item bd-r">
          <notify-btn cls="ui btn secondary no-rounder no-border" @hit="handleExerciseSelect">
            继续添加题目
          </notify-btn>
        </div>
        <div class="weui-flex__item">
          <notify-btn cls="ui btn primary no-rounder no-border" @hit="handlePublish">
            去布置
          </notify-btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import NotifyBtn from '@/components/notify-btn'
import SoundPlayer from '@/components/sound-player'
import Pic from '@/components/pic'

export default{
  components: {
    NotifyBtn,
    SoundPlayer,
    Pic,
  },
  computed: {
    ...mapGetters('homework-preview', [
      'cards',
      'sentences'
    ])
  },
  methods: {
    ...mapActions('exercise-select', [
      'handleToggleSelect',
    ]),
    ...mapActions('homework-preview', [
      'handleExerciseSelect',
      'handlePublish',
    ])
  },
}
</script>

<style scoped lang="less">
</style>
